
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
// 
//   http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

/**
 * AUTO-GENERATED FILE. DO NOT MODIFY.
 */

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
// 
//   http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.
import { __extends } from 'tslib';
import { bind, each, isFunction, isString, indexOf } from 'zrender/lib/core/util.js';
import * as eventTool from 'zrender/lib/core/event.js';
import * as graphic from '../../util/graphic.js';
import * as throttle from '../../util/throttle.js';
import DataZoomView from './DataZoomView.js';
import { linearMap, asc, parsePercent } from '../../util/number.js';
import * as layout from '../../util/layout.js';
import sliderMove from '../helper/sliderMove.js';
import { getAxisMainType, collectReferCoordSysModelInfo } from './helper.js';
import { enableHoverEmphasis } from '../../util/states.js';
import { createSymbol, symbolBuildProxies } from '../../util/symbol.js';
import { deprecateLog } from '../../util/log.js';
import { createTextStyle } from '../../label/labelStyle.js';
var Rect = graphic.Rect; // Constants

var DEFAULT_LOCATION_EDGE_GAP = 7;
var DEFAULT_FRAME_BORDER_WIDTH = 1;
var DEFAULT_FILLER_SIZE = 30;
var DEFAULT_MOVE_HANDLE_SIZE = 7;
var HORIZONTAL = 'horizontal';
var VERTICAL = 'vertical';
var LABEL_GAP = 5;
var SHOW_DATA_SHADOW_SERIES_TYPE = ['line', 'bar', 'candlestick', 'scatter'];
var REALTIME_ANIMATION_CONFIG = {
	easing: 'cubicOut',
	duration: 100,
	delay: 0
};

var SliderZoomView =
/** @class */
function (_super) {
	__extends(SliderZoomView, _super);

	function SliderZoomView() {
		var _this = _super !== null && _super.apply(this, arguments) || this;

		_this.type = SliderZoomView.type;
		_this._displayables = {};
		return _this;
	}

	SliderZoomView.prototype.init = function (ecModel, api) {
		this.api = api; // A unique handler for each dataZoom component

		this._onBrush = bind(this._onBrush, this);
		this._onBrushEnd = bind(this._onBrushEnd, this);
	};

	SliderZoomView.prototype.render = function (dataZoomModel, ecModel, api, payload) {
		_super.prototype.render.apply(this, arguments);

		throttle.createOrUpdate(this, '_dispatchZoomAction', dataZoomModel.get('throttle'), 'fixRate');
		this._orient = dataZoomModel.getOrient();

		if (dataZoomModel.get('show') === false) {
			this.group.removeAll();
			return;
		}

		if (dataZoomModel.noTarget()) {
			this._clear();

			this.group.removeAll();
			return;
		} // Notice: this._resetInterval() should not be executed when payload.type
		// is 'dataZoom', origin this._range should be maintained, otherwise 'pan'
		// or 'zoom' info will be missed because of 'throttle' of this.dispatchAction,

		if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
			this._buildView();
		}

		this._updateView();
	};

	SliderZoomView.prototype.dispose = function () {
		this._clear();

		_super.prototype.dispose.apply(this, arguments);
	};

	SliderZoomView.prototype._clear = function () {
		throttle.clear(this, '_dispatchZoomAction');
		var zr = this.api.getZr();
		zr.off('mousemove', this._onBrush);
		zr.off('mouseup', this._onBrushEnd);
	};

	SliderZoomView.prototype._buildView = function () {
		var thisGroup = this.group;
		thisGroup.removeAll();
		this._brushing = false;
		this._displayables.brushRect = null;

		this._resetLocation();

		this._resetInterval();

		var barGroup = this._displayables.sliderGroup = new graphic.Group();

		this._renderBackground();

		this._renderHandle();

		this._renderDataShadow();

		thisGroup.add(barGroup);

		this._positionGroup();
	};

	SliderZoomView.prototype._resetLocation = function () {
		var dataZoomModel = this.dataZoomModel;
		var api = this.api;
		var showMoveHandle = dataZoomModel.get('brushSelect');
		var moveHandleSize = showMoveHandle ? DEFAULT_MOVE_HANDLE_SIZE : 0; // If some of x/y/width/height are not specified,
		// auto-adapt according to target grid.

		var coordRect = this._findCoordRect();

		var ecSize = {
			width: api.getWidth(),
			height: api.getHeight()
		}; // Default align by coordinate system rect.

		var positionInfo = this._orient === HORIZONTAL ? {
			// Why using 'right', because right should be used in vertical,
			// and it is better to be consistent for dealing with position param merge.
			right: ecSize.width - coordRect.x - coordRect.width,
			top: ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP - moveHandleSize,
			width: coordRect.width,
			height: DEFAULT_FILLER_SIZE
		} : {
			right: DEFAULT_LOCATION_EDGE_GAP,
			top: coordRect.y,
			width: DEFAULT_FILLER_SIZE,
			height: coordRect.height
		}; // Do not write back to option and replace value 'ph', because
		// the 'ph' value should be recalculated when resize.

		var layoutParams = layout.getLayoutParams(dataZoomModel.option); // Replace the placeholder value.

		each(['right', 'top', 'width', 'height'], function (name) {
			if (layoutParams[name] === 'ph') {
				layoutParams[name] = positionInfo[name];
			}
		});
		var layoutRect = layout.getLayoutRect(layoutParams, ecSize);
		this._location = {
			x: layoutRect.x,
			y: layoutRect.y
		};
		this._size = [layoutRect.width, layoutRect.height];
		this._orient === VERTICAL && this._size.reverse();
	};

	SliderZoomView.prototype._positionGroup = function () {
		var thisGroup = this.group;
		var location = this._location;
		var orient = this._orient; // Just use the first axis to determine mapping.

		var targetAxisModel = this.dataZoomModel.getFirstTargetAxisModel();
		var inverse = targetAxisModel && targetAxisModel.get('inverse');
		var sliderGroup = this._displayables.sliderGroup;
		var otherAxisInverse = (this._dataShadowInfo || {}).otherAxisInverse; // Transform barGroup.

		sliderGroup.attr(orient === HORIZONTAL && !inverse ? {
			scaleY: otherAxisInverse ? 1 : -1,
			scaleX: 1
		} : orient === HORIZONTAL && inverse ? {
			scaleY: otherAxisInverse ? 1 : -1,
			scaleX: -1
		} : orient === VERTICAL && !inverse ? {
			scaleY: otherAxisInverse ? -1 : 1,
			scaleX: 1,
			rotation: Math.PI / 2
		} // Don't use Math.PI, considering shadow direction.
			: {
				scaleY: otherAxisInverse ? -1 : 1,
				scaleX: -1,
				rotation: Math.PI / 2
			}); // Position barGroup

		var rect = thisGroup.getBoundingRect([sliderGroup]);
		thisGroup.x = location.x - rect.x;
		thisGroup.y = location.y - rect.y;
		thisGroup.markRedraw();
	};

	SliderZoomView.prototype._getViewExtent = function () {
		return [0, this._size[0]];
	};

	SliderZoomView.prototype._renderBackground = function () {
		var dataZoomModel = this.dataZoomModel;
		var size = this._size;
		var barGroup = this._displayables.sliderGroup;
		var brushSelect = dataZoomModel.get('brushSelect');
		barGroup.add(new Rect({
			silent: true,
			shape: {
				x: 0,
				y: 0,
				width: size[0],
				height: size[1]
			},
			style: {
				fill: dataZoomModel.get('backgroundColor')
			},
			z2: -40
		})); // Click panel, over shadow, below handles.

		var clickPanel = new Rect({
			shape: {
				x: 0,
				y: 0,
				width: size[0],
				height: size[1]
			},
			style: {
				fill: 'transparent'
			},
			z2: 0,
			onclick: bind(this._onClickPanel, this)
		});
		var zr = this.api.getZr();

		if (brushSelect) {
			clickPanel.on('mousedown', this._onBrushStart, this);
			clickPanel.cursor = 'crosshair';
			zr.on('mousemove', this._onBrush);
			zr.on('mouseup', this._onBrushEnd);
		} else {
			zr.off('mousemove', this._onBrush);
			zr.off('mouseup', this._onBrushEnd);
		}

		barGroup.add(clickPanel);
	};

	SliderZoomView.prototype._renderDataShadow = function () {
		var info = this._dataShadowInfo = this._prepareDataShadowInfo();

		this._displayables.dataShadowSegs = [];

		if (!info) {
			return;
		}

		var size = this._size;
		var oldSize = this._shadowSize || [];
		var seriesModel = info.series;
		var data = seriesModel.getRawData();
		var candlestickDim = seriesModel.getShadowDim && seriesModel.getShadowDim();
		var otherDim = candlestickDim && data.getDimensionInfo(candlestickDim) ? seriesModel.getShadowDim() // @see candlestick
			: info.otherDim;

		if (otherDim == null) {
			return;
		}

		var polygonPts = this._shadowPolygonPts;
		var polylinePts = this._shadowPolylinePts; // Not re-render if data doesn't change.

		if (data !== this._shadowData || otherDim !== this._shadowDim || size[0] !== oldSize[0] || size[1] !== oldSize[1]) {
			var otherDataExtent_1 = data.getDataExtent(otherDim); // Nice extent.

			var otherOffset = (otherDataExtent_1[1] - otherDataExtent_1[0]) * 0.3;
			otherDataExtent_1 = [otherDataExtent_1[0] - otherOffset, otherDataExtent_1[1] + otherOffset];
			var otherShadowExtent_1 = [0, size[1]];
			var thisShadowExtent = [0, size[0]];
			var areaPoints_1 = [[size[0], 0], [0, 0]];
			var linePoints_1 = [];
			var step_1 = thisShadowExtent[1] / (data.count() - 1);
			var thisCoord_1 = 0; // Optimize for large data shadow

			var stride_1 = Math.round(data.count() / size[0]);
			var lastIsEmpty_1;
			data.each([otherDim], function (value, index) {
				if (stride_1 > 0 && index % stride_1) {
					thisCoord_1 += step_1;
					return;
				} // FIXME
				// Should consider axis.min/axis.max when drawing dataShadow.
				// FIXME
				// 应该使用统一的空判断？还是在list里进行空判断？

				var isEmpty = value == null || isNaN(value) || value === ''; // See #4235.

				var otherCoord = isEmpty ? 0 : linearMap(value, otherDataExtent_1, otherShadowExtent_1, true); // Attempt to draw data shadow precisely when there are empty value.

				if (isEmpty && !lastIsEmpty_1 && index) {
					areaPoints_1.push([areaPoints_1[areaPoints_1.length - 1][0], 0]);
					linePoints_1.push([linePoints_1[linePoints_1.length - 1][0], 0]);
				} else if (!isEmpty && lastIsEmpty_1) {
					areaPoints_1.push([thisCoord_1, 0]);
					linePoints_1.push([thisCoord_1, 0]);
				}

				areaPoints_1.push([thisCoord_1, otherCoord]);
				linePoints_1.push([thisCoord_1, otherCoord]);
				thisCoord_1 += step_1;
				lastIsEmpty_1 = isEmpty;
			});
			polygonPts = this._shadowPolygonPts = areaPoints_1;
			polylinePts = this._shadowPolylinePts = linePoints_1;
		}

		this._shadowData = data;
		this._shadowDim = otherDim;
		this._shadowSize = [size[0], size[1]];
		var dataZoomModel = this.dataZoomModel;

		function createDataShadowGroup(isSelectedArea) {
			var model = dataZoomModel.getModel(isSelectedArea ? 'selectedDataBackground' : 'dataBackground');
			var group = new graphic.Group();
			var polygon = new graphic.Polygon({
				shape: {
					points: polygonPts
				},
				segmentIgnoreThreshold: 1,
				style: model.getModel('areaStyle').getAreaStyle(),
				silent: true,
				z2: -20
			});
			var polyline = new graphic.Polyline({
				shape: {
					points: polylinePts
				},
				segmentIgnoreThreshold: 1,
				style: model.getModel('lineStyle').getLineStyle(),
				silent: true,
				z2: -19
			});
			group.add(polygon);
			group.add(polyline);
			return group;
		} // let dataBackgroundModel = dataZoomModel.getModel('dataBackground');

		for (var i = 0; i < 3; i++) {
			var group = createDataShadowGroup(i === 1);

			this._displayables.sliderGroup.add(group);

			this._displayables.dataShadowSegs.push(group);
		}
	};

	SliderZoomView.prototype._prepareDataShadowInfo = function () {
		var dataZoomModel = this.dataZoomModel;
		var showDataShadow = dataZoomModel.get('showDataShadow');

		if (showDataShadow === false) {
			return;
		} // Find a representative series.

		var result;
		var ecModel = this.ecModel;
		dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
			var seriesModels = dataZoomModel.getAxisProxy(axisDim, axisIndex).getTargetSeriesModels();
			each(seriesModels, function (seriesModel) {
				if (result) {
					return;
				}

				if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) {
					return;
				}

				var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
				var otherDim = getOtherDim(axisDim);
				var otherAxisInverse;
				var coordSys = seriesModel.coordinateSystem;

				if (otherDim != null && coordSys.getOtherAxis) {
					otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
				}

				otherDim = seriesModel.getData().mapDimension(otherDim);
				result = {
					thisAxis: thisAxis,
					series: seriesModel,
					thisDim: axisDim,
					otherDim: otherDim,
					otherAxisInverse: otherAxisInverse
				};
			}, this);
		}, this);
		return result;
	};

	SliderZoomView.prototype._renderHandle = function () {
		var thisGroup = this.group;
		var displayables = this._displayables;
		var handles = displayables.handles = [null, null];
		var handleLabels = displayables.handleLabels = [null, null];
		var sliderGroup = this._displayables.sliderGroup;
		var size = this._size;
		var dataZoomModel = this.dataZoomModel;
		var api = this.api;
		var borderRadius = dataZoomModel.get('borderRadius') || 0;
		var brushSelect = dataZoomModel.get('brushSelect');
		var filler = displayables.filler = new Rect({
			silent: brushSelect,
			style: {
				fill: dataZoomModel.get('fillerColor')
			},
			textConfig: {
				position: 'inside'
			}
		});
		sliderGroup.add(filler); // Frame border.

		sliderGroup.add(new Rect({
			silent: true,
			subPixelOptimize: true,
			shape: {
				x: 0,
				y: 0,
				width: size[0],
				height: size[1],
				r: borderRadius
			},
			style: {
				// deprecated option
				stroke: dataZoomModel.get('dataBackgroundColor') || dataZoomModel.get('borderColor'),
				lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
				fill: 'rgba(0,0,0,0)'
			}
		})); // Left and right handle to resize

		each([0, 1], function (handleIndex) {
			var iconStr = dataZoomModel.get('handleIcon');

			if (!symbolBuildProxies[iconStr] && iconStr.indexOf('path://') < 0 && iconStr.indexOf('image://') < 0) {
				// Compatitable with the old icon parsers. Which can use a path string without path://
				iconStr = 'path://' + iconStr;

				if (process.env.NODE_ENV !== 'production') {
					deprecateLog('handleIcon now needs \'path://\' prefix when using a path string');
				}
			}

			var path = createSymbol(iconStr, -1, 0, 2, 2, null, true);
			path.attr({
				cursor: getCursor(this._orient),
				draggable: true,
				drift: bind(this._onDragMove, this, handleIndex),
				ondragend: bind(this._onDragEnd, this),
				onmouseover: bind(this._showDataInfo, this, true),
				onmouseout: bind(this._showDataInfo, this, false),
				z2: 5
			});
			var bRect = path.getBoundingRect();
			var handleSize = dataZoomModel.get('handleSize');
			this._handleHeight = parsePercent(handleSize, this._size[1]);
			this._handleWidth = bRect.width / bRect.height * this._handleHeight;
			path.setStyle(dataZoomModel.getModel('handleStyle').getItemStyle());
			path.style.strokeNoScale = true;
			path.rectHover = true;
			path.ensureState('emphasis').style = dataZoomModel.getModel(['emphasis', 'handleStyle']).getItemStyle();
			enableHoverEmphasis(path);
			var handleColor = dataZoomModel.get('handleColor'); // deprecated option
			// Compatitable with previous version

			if (handleColor != null) {
				path.style.fill = handleColor;
			}

			sliderGroup.add(handles[handleIndex] = path);
			var textStyleModel = dataZoomModel.getModel('textStyle');
			thisGroup.add(handleLabels[handleIndex] = new graphic.Text({
				silent: true,
				invisible: true,
				style: createTextStyle(textStyleModel, {
					x: 0,
					y: 0,
					text: '',
					verticalAlign: 'middle',
					align: 'center',
					fill: textStyleModel.getTextColor(),
					font: textStyleModel.getFont()
				}),
				z2: 10
			}));
		}, this); // Handle to move. Only visible when brushSelect is set true.

		var actualMoveZone = filler;

		if (brushSelect) {
			var moveHandleHeight = parsePercent(dataZoomModel.get('moveHandleSize'), size[1]);
			var moveHandle_1 = displayables.moveHandle = new graphic.Rect({
				style: dataZoomModel.getModel('moveHandleStyle').getItemStyle(),
				silent: true,
				shape: {
					r: [0, 0, 2, 2],
					y: size[1] - 0.5,
					height: moveHandleHeight
				}
			});
			var iconSize = moveHandleHeight * 0.8;
			var moveHandleIcon = displayables.moveHandleIcon = createSymbol(dataZoomModel.get('moveHandleIcon'), -iconSize / 2, -iconSize / 2, iconSize, iconSize, '#fff', true);
			moveHandleIcon.silent = true;
			moveHandleIcon.y = size[1] + moveHandleHeight / 2 - 0.5;
			moveHandle_1.ensureState('emphasis').style = dataZoomModel.getModel(['emphasis', 'moveHandleStyle']).getItemStyle();
			var moveZoneExpandSize = Math.min(size[1] / 2, Math.max(moveHandleHeight, 10));
			actualMoveZone = displayables.moveZone = new graphic.Rect({
				invisible: true,
				shape: {
					y: size[1] - moveZoneExpandSize,
					height: moveHandleHeight + moveZoneExpandSize
				}
			});
			actualMoveZone.on('mouseover', function () {
				api.enterEmphasis(moveHandle_1);
			}).on('mouseout', function () {
				api.leaveEmphasis(moveHandle_1);
			});
			sliderGroup.add(moveHandle_1);
			sliderGroup.add(moveHandleIcon);
			sliderGroup.add(actualMoveZone);
		}

		actualMoveZone.attr({
			draggable: true,
			cursor: getCursor(this._orient),
			drift: bind(this._onDragMove, this, 'all'),
			ondragstart: bind(this._showDataInfo, this, true),
			ondragend: bind(this._onDragEnd, this),
			onmouseover: bind(this._showDataInfo, this, true),
			onmouseout: bind(this._showDataInfo, this, false)
		});
	};

	SliderZoomView.prototype._resetInterval = function () {
		var range = this._range = this.dataZoomModel.getPercentRange();

		var viewExtent = this._getViewExtent();

		this._handleEnds = [linearMap(range[0], [0, 100], viewExtent, true), linearMap(range[1], [0, 100], viewExtent, true)];
	};

	SliderZoomView.prototype._updateInterval = function (handleIndex, delta) {
		var dataZoomModel = this.dataZoomModel;
		var handleEnds = this._handleEnds;

		var viewExtend = this._getViewExtent();

		var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
		var percentExtent = [0, 100];
		sliderMove(delta, handleEnds, viewExtend, dataZoomModel.get('zoomLock') ? 'all' : handleIndex, minMaxSpan.minSpan != null ? linearMap(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null, minMaxSpan.maxSpan != null ? linearMap(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null);
		var lastRange = this._range;
		var range = this._range = asc([linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true)]);
		return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
	};

	SliderZoomView.prototype._updateView = function (nonRealtime) {
		var displaybles = this._displayables;
		var handleEnds = this._handleEnds;
		var handleInterval = asc(handleEnds.slice());
		var size = this._size;
		each([0, 1], function (handleIndex) {
			// Handles
			var handle = displaybles.handles[handleIndex];
			var handleHeight = this._handleHeight;
			handle.attr({
				scaleX: handleHeight / 2,
				scaleY: handleHeight / 2,
				// This is a trick, by adding an extra tiny offset to let the default handle's end point align to the drag window.
				// NOTE: It may affect some custom shapes a bit. But we prefer to have better result by default.
				x: handleEnds[handleIndex] + (handleIndex ? -1 : 1),
				y: size[1] / 2 - handleHeight / 2
			});
		}, this); // Filler

		displaybles.filler.setShape({
			x: handleInterval[0],
			y: 0,
			width: handleInterval[1] - handleInterval[0],
			height: size[1]
		});
		var viewExtent = {
			x: handleInterval[0],
			width: handleInterval[1] - handleInterval[0]
		}; // Move handle

		if (displaybles.moveHandle) {
			displaybles.moveHandle.setShape(viewExtent);
			displaybles.moveZone.setShape(viewExtent); // Force update path on the invisible object

			displaybles.moveZone.getBoundingRect();
			displaybles.moveHandleIcon && displaybles.moveHandleIcon.attr('x', viewExtent.x + viewExtent.width / 2);
		} // update clip path of shadow.

		var dataShadowSegs = displaybles.dataShadowSegs;
		var segIntervals = [0, handleInterval[0], handleInterval[1], size[0]];

		for (var i = 0; i < dataShadowSegs.length; i++) {
			var segGroup = dataShadowSegs[i];
			var clipPath = segGroup.getClipPath();

			if (!clipPath) {
				clipPath = new graphic.Rect();
				segGroup.setClipPath(clipPath);
			}

			clipPath.setShape({
				x: segIntervals[i],
				y: 0,
				width: segIntervals[i + 1] - segIntervals[i],
				height: size[1]
			});
		}

		this._updateDataInfo(nonRealtime);
	};

	SliderZoomView.prototype._updateDataInfo = function (nonRealtime) {
		var dataZoomModel = this.dataZoomModel;
		var displaybles = this._displayables;
		var handleLabels = displaybles.handleLabels;
		var orient = this._orient;
		var labelTexts = ['', '']; // FIXME
		// date型，支持formatter，autoformatter（ec2 date.getAutoFormatter）

		if (dataZoomModel.get('showDetail')) {
			var axisProxy = dataZoomModel.findRepresentativeAxisProxy();

			if (axisProxy) {
				var axis = axisProxy.getAxisModel().axis;
				var range = this._range;
				var dataInterval = nonRealtime // See #4434, data and axis are not processed and reset yet in non-realtime mode.
					? axisProxy.calculateDataWindow({
						start: range[0],
						end: range[1]
					}).valueWindow : axisProxy.getDataValueWindow();
				labelTexts = [this._formatLabel(dataInterval[0], axis), this._formatLabel(dataInterval[1], axis)];
			}
		}

		var orderedHandleEnds = asc(this._handleEnds.slice());
		setLabel.call(this, 0);
		setLabel.call(this, 1);

		function setLabel(handleIndex) {
			// Label
			// Text should not transform by barGroup.
			// Ignore handlers transform
			var barTransform = graphic.getTransform(displaybles.handles[handleIndex].parent, this.group);
			var direction = graphic.transformDirection(handleIndex === 0 ? 'right' : 'left', barTransform);
			var offset = this._handleWidth / 2 + LABEL_GAP;
			var textPoint = graphic.applyTransform([orderedHandleEnds[handleIndex] + (handleIndex === 0 ? -offset : offset), this._size[1] / 2], barTransform);
			handleLabels[handleIndex].setStyle({
				x: textPoint[0],
				y: textPoint[1],
				verticalAlign: orient === HORIZONTAL ? 'middle' : direction,
				align: orient === HORIZONTAL ? direction : 'center',
				text: labelTexts[handleIndex]
			});
		}
	};

	SliderZoomView.prototype._formatLabel = function (value, axis) {
		var dataZoomModel = this.dataZoomModel;
		var labelFormatter = dataZoomModel.get('labelFormatter');
		var labelPrecision = dataZoomModel.get('labelPrecision');

		if (labelPrecision == null || labelPrecision === 'auto') {
			labelPrecision = axis.getPixelPrecision();
		}

		var valueStr = value == null || isNaN(value) ? '' // FIXME Glue code
			: axis.type === 'category' || axis.type === 'time' ? axis.scale.getLabel({
				value: Math.round(value)
			}) // param of toFixed should less then 20.
				: value.toFixed(Math.min(labelPrecision, 20));
		return isFunction(labelFormatter) ? labelFormatter(value, valueStr) : isString(labelFormatter) ? labelFormatter.replace('{value}', valueStr) : valueStr;
	};
	/**
   * @param showOrHide true: show, false: hide
   */

	SliderZoomView.prototype._showDataInfo = function (showOrHide) {
		// Always show when drgging.
		showOrHide = this._dragging || showOrHide;
		var displayables = this._displayables;
		var handleLabels = displayables.handleLabels;
		handleLabels[0].attr('invisible', !showOrHide);
		handleLabels[1].attr('invisible', !showOrHide); // Highlight move handle

		displayables.moveHandle && this.api[showOrHide ? 'enterEmphasis' : 'leaveEmphasis'](displayables.moveHandle, 1);
	};

	SliderZoomView.prototype._onDragMove = function (handleIndex, dx, dy, event) {
		this._dragging = true; // For mobile device, prevent screen slider on the button.

		eventTool.stop(event.event); // Transform dx, dy to bar coordination.

		var barTransform = this._displayables.sliderGroup.getLocalTransform();

		var vertex = graphic.applyTransform([dx, dy], barTransform, true);

		var changed = this._updateInterval(handleIndex, vertex[0]);

		var realtime = this.dataZoomModel.get('realtime');

		this._updateView(!realtime); // Avoid dispatch dataZoom repeatly but range not changed,
		// which cause bad visual effect when progressive enabled.

		changed && realtime && this._dispatchZoomAction(true);
	};

	SliderZoomView.prototype._onDragEnd = function () {
		this._dragging = false;

		this._showDataInfo(false); // While in realtime mode and stream mode, dispatch action when
		// drag end will cause the whole view rerender, which is unnecessary.

		var realtime = this.dataZoomModel.get('realtime');
		!realtime && this._dispatchZoomAction(false);
	};

	SliderZoomView.prototype._onClickPanel = function (e) {
		var size = this._size;

		var localPoint = this._displayables.sliderGroup.transformCoordToLocal(e.offsetX, e.offsetY);

		if (localPoint[0] < 0 || localPoint[0] > size[0] || localPoint[1] < 0 || localPoint[1] > size[1]) {
			return;
		}

		var handleEnds = this._handleEnds;
		var center = (handleEnds[0] + handleEnds[1]) / 2;

		var changed = this._updateInterval('all', localPoint[0] - center);

		this._updateView();

		changed && this._dispatchZoomAction(false);
	};

	SliderZoomView.prototype._onBrushStart = function (e) {
		var x = e.offsetX;
		var y = e.offsetY;
		this._brushStart = new graphic.Point(x, y);
		this._brushing = true;
		this._brushStartTime = +new Date(); // this._updateBrushRect(x, y);
	};

	SliderZoomView.prototype._onBrushEnd = function (e) {
		if (!this._brushing) {
			return;
		}

		var brushRect = this._displayables.brushRect;
		this._brushing = false;

		if (!brushRect) {
			return;
		}

		brushRect.attr('ignore', true);
		var brushShape = brushRect.shape;
		var brushEndTime = +new Date(); // console.log(brushEndTime - this._brushStartTime);

		if (brushEndTime - this._brushStartTime < 200 && Math.abs(brushShape.width) < 5) {
			// Will treat it as a click
			return;
		}

		var viewExtend = this._getViewExtent();

		var percentExtent = [0, 100];
		this._range = asc([linearMap(brushShape.x, viewExtend, percentExtent, true), linearMap(brushShape.x + brushShape.width, viewExtend, percentExtent, true)]);
		this._handleEnds = [brushShape.x, brushShape.x + brushShape.width];

		this._updateView();

		this._dispatchZoomAction(false);
	};

	SliderZoomView.prototype._onBrush = function (e) {
		if (this._brushing) {
			// For mobile device, prevent screen slider on the button.
			eventTool.stop(e.event);

			this._updateBrushRect(e.offsetX, e.offsetY);
		}
	};

	SliderZoomView.prototype._updateBrushRect = function (mouseX, mouseY) {
		var displayables = this._displayables;
		var dataZoomModel = this.dataZoomModel;
		var brushRect = displayables.brushRect;

		if (!brushRect) {
			brushRect = displayables.brushRect = new Rect({
				silent: true,
				style: dataZoomModel.getModel('brushStyle').getItemStyle()
			});
			displayables.sliderGroup.add(brushRect);
		}

		brushRect.attr('ignore', false);
		var brushStart = this._brushStart;
		var sliderGroup = this._displayables.sliderGroup;
		var endPoint = sliderGroup.transformCoordToLocal(mouseX, mouseY);
		var startPoint = sliderGroup.transformCoordToLocal(brushStart.x, brushStart.y);
		var size = this._size;
		endPoint[0] = Math.max(Math.min(size[0], endPoint[0]), 0);
		brushRect.setShape({
			x: startPoint[0],
			y: 0,
			width: endPoint[0] - startPoint[0],
			height: size[1]
		});
	};
	/**
   * This action will be throttled.
   */

	SliderZoomView.prototype._dispatchZoomAction = function (realtime) {
		var range = this._range;
		this.api.dispatchAction({
			type: 'dataZoom',
			from: this.uid,
			dataZoomId: this.dataZoomModel.id,
			animation: realtime ? REALTIME_ANIMATION_CONFIG : null,
			start: range[0],
			end: range[1]
		});
	};

	SliderZoomView.prototype._findCoordRect = function () {
		// Find the grid corresponding to the first axis referred by dataZoom.
		var rect;
		var coordSysInfoList = collectReferCoordSysModelInfo(this.dataZoomModel).infoList;

		if (!rect && coordSysInfoList.length) {
			var coordSys = coordSysInfoList[0].model.coordinateSystem;
			rect = coordSys.getRect && coordSys.getRect();
		}

		if (!rect) {
			var width = this.api.getWidth();
			var height = this.api.getHeight();
			rect = {
				x: width * 0.2,
				y: height * 0.2,
				width: width * 0.6,
				height: height * 0.6
			};
		}

		return rect;
	};

	SliderZoomView.type = 'dataZoom.slider';
	return SliderZoomView;
}(DataZoomView);

function getOtherDim(thisDim) {
	// FIXME
	// 这个逻辑和getOtherAxis里一致，但是写在这里是否不好
	var map = {
		x: 'y',
		y: 'x',
		radius: 'angle',
		angle: 'radius'
	};
	return map[thisDim];
}

function getCursor(orient) {
	return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
}

export default SliderZoomView;